<template>
  <div>
    <div class='dialog-wrap-center'>
      <div class='dialog-cover-center' v-if='isShow' @click.stop='closeMyself()'></div>
      <transition name='dropc' class='dropc'>
        <div class='dialog-content-center' v-if='isShow'>
          <div class='top-title-center'>
            <span class='title-class'>{{title}}</span>
            <span class='dialog-close-center' @click.stop='closeMyself()'>x</span>
          </div>
          <div class='input' v-if='popupindex!=3'>
            <label v-for='(item,index) in optionList' :key='index'>
              <el-radio
                class='radio-ele'
                :label='index'
                v-model='chooseValue'
                :checked='item.isCheck'
              >{{item}}</el-radio>
            </label>
            <div class='buttom-selected'>
              <el-row>
                <el-button class='singleBtnClassClose' @click.stop='closeMyself()'>取消</el-button>
                <el-button class='singleBtnClassSubmmit' type='primary' @click='submmit()'>提交</el-button>
              </el-row>
            </div>
          </div>
          <div class='select' v-else>
            <div class="select-div-span">
            <span>请选择删除原因:</span>
              <el-select v-model='selected'>
                <el-option
                  class='el-option'
                  v-for='item in options'
                  :key='item.value'
                  :label='item.label'
                  :value='item.value'
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-input
                maxlength='25'
                v-if="selected==='6'"
                type='textarea'
                :rows='4'
                class='el-inputrr'
                placeholder='请输入内容'
                v-model='textareaValue'
              ></el-input>
              <el-input
                maxlength='25'
                v-else
                class='el-inputrr'
                type='textarea'
                disabled
                :rows='4'
                placeholder='请选择自定义即可输入内容'
              ></el-input>
            </div>
            <div class='buttom'>
              <el-row>
                <el-button class='singleBtnClassClose' @click.stop='closeMyself()'>取消</el-button>
                <el-button class='singleBtnClassSubmmit' type='primary' @click='submmit()'>提交</el-button>
              </el-row>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '请选择操作'
    },
    operationList: {
      type: Array,
      default: ''
    },
    popupindex: {
      type: Number,
      default: ''
    },
    optionList: {
      type: Array,
      default: ''
    }
  },
  data() {
    return {
      chooseValue: 0,
      selected: '请选择', // 下拉列表value
      disabledShow: '',
      textareaValue: '',
      options: [
        {
          value: '1',
          label: '广告'
        },
        {
          value: '2',
          label: '恶意灌水'
        },
        {
          value: '3',
          label: '违规内容'
        },
        {
          value: '4',
          label: '文不对题'
        },
        {
          value: '5',
          label: '重复内容'
        },
        {
          value: '6',
          label: '自定义'
        }
      ]
    };
  },
  methods: {
    submmit() {
      if (this.popupindex === 3) {
        // this.popupindex 为弹出框的id，当为3时选则删除内容
        if (this.selected === '请选择') {
          this.errorTip('请先选择');
        } else {
          if (this.selected === '6') {
            // this.selected 下拉的value，当值为6时选则自定义内容
            // 判断删除自定义内容是否为空
            if (this.textareaValue === '') {
              this.errorTip('请先输入内容！');
            } else {
              this.$emit('on-popup', this.selected, this.textareaValue); // 否则将下拉value和内容的值传给父组件
              this.$emit('on-close');
            }
          } else {
            this.$emit('on-popup', this.selected); // 如果没有选则自定义，则把下拉value传出去
            this.$emit('on-close');
          }
        }
      } else {
        this.$emit('on-popup', this.chooseValue);
        this.$emit('on-close');
      }
    },
    closeMyself() {
      this.$emit('on-close');
    }
  }
};
</script>

<style >
.radio-ele {
  margin-left: 20px;
}
.el-option {
  width: 200px;
}
.el-inputrr {
  margin-top: 10px;
  width: 320px;
}
.input {
  text-align: center;
}
.title-class {
  position: absolute;
  left: -20px;
  font-size: 18px;
}
.select {
  /* position: relative; */
  text-align: center;
}
.select-div-span>span{
  color:red;
}
.selectAge {
  text-align: center;
}
.buttom {
  text-align: center;
  margin-top: 20px;
}
.buttom-selected {
  text-align: center;
  margin-top: 80px;
}
.textarea {
  width: 200px;
  height: 100px;
}
.singleBtnClassClose {
  width: 140px;
  height: 40px;
}
.singleBtnClassSubmmit {
  width: 140px;
  height: 40px;
}
.btnFrameClass {
  position: absolute;
  top: 100px;
}
.dropc-enter-active {
  transition: all 0.3s ease;
}
.dropc-leave-active {
  transition: all 0.3s ease;
}
.dropc-enter {
  transform: translateY(-20vh);
}
.dropc-leave-active {
  transform: translateY(-20vh);
}

.dialog-wrap-center {
  position: fixed;
  width: 1px;
  height: 100%;
  z-index: 999;
  right: 0;
}
.dialog-cover-center {
  background: #000;
  opacity: 0.4;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.top-title-center {
  background: #fff;
  border-bottom: 1px solid #e3e4e6;
  height: 50px;
  line-height: 50px;
  font-size: 16px !important;
  color: #333;
  text-indent: 20px;
  position: absolute;
  top: 0;
  left: 10px;
  width: 540px;
}
.dialog-content-center {
  width: 540px;
  position: fixed;
  height: 300px;
  background: #fff;
  top: 20vh;
  right: 0;
  z-index: 1000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 70px;
  overflow: hidden;
  box-sizing: border-box;
  left: 0;
  margin: 0 auto;
  border-radius: 4px;
}
.dialog-close-center {
  position: absolute;
  right: 45px;
  top: 0;
  text-align: center;
  cursor: pointer;
  font-size: 16px !important;
}
.dialog-close-center:hover {
  color: #4fc08d;
}
</style>
